<template>
  <div class="cubic-container" ref="containerRef">
    <el-button type="primary" size="small" @click="intoBox" class="btn">进入</el-button>
    <el-button type="primary" size="small" @click="cubicBoxClass = ''" class="btn">退出</el-button>
    <div>{{ count }}</div>
    <div class="stage" ref="stageRef" :style="`transform: translateZ(${stageZ}px)`">
      <div
        ref="cubicRef"
        class="cubic-box"
        :class="cubicBoxClass"
        :style="`transform: rotateX(${cubicBoxRotateX}deg) rotateY(338deg);`"
      > 
        <div class="face face-front">1</div>
        <div class="face face-front-backface">1</div>
        <div class="face face-back">2</div>
        <div class="face face-back-backface">2</div>
        <div class="face face-right">3</div>
        <div class="face face-right-backface">3</div>
        <div class="face face-left">4</div>
        <div class="face face-left-backface">4</div>
        <div class="face face-bottom">5</div>
        <div class="face face-bottom-backface">5</div>
        <div class="face face-top">6</div>
        <div class="face face-top-backface">6</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useScaleByWheel } from '@/hooks/useScaleByWheel';
import { useGesture } from '@/hooks/useGesture';
const cubicBoxClass = ref('');
const cubicRef = ref<HTMLElement>();
const stageRef = ref<HTMLElement>();
const containerRef = ref<HTMLElement>();

const count = ref(0);
const stageZ = ref(0);
const cubicBoxRotateX = ref(311);

onMounted(() => {
  const { distanceDiff } = useScaleByWheel({
    target: containerRef?.value
  });
  watch(distanceDiff, () => {
    stageZ.value = distanceDiff.value;
  });

  const { distanceDiff: gestureDistanceDiff, rotateAngleDiff } = useGesture({
    target: containerRef?.value
  });
  watch(gestureDistanceDiff, () => {
    stageZ.value += gestureDistanceDiff.value;
  });
  watch(rotateAngleDiff, () => {
    cubicBoxRotateX.value += rotateAngleDiff.value;
  });
});

function intoBox() {
  cubicBoxClass.value = 'into';
}
</script>

<style scoped lang="scss">
$width: calc(100vmin / 2.5);
$height: $width;
$halfWidth: calc($width / 2);
$perspective: 100vw;

.cubic-container {
  width: 100vw;
  height: 100vh;
  perspective: $perspective;
  overflow: hidden;
  user-select: none;
}
.stage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: $perspective;
  .cubic-box {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    position: relative;
    width: $width;
    height: $height;
    transform-style: preserve-3d;
  }

  .cubic-box.into {
    transform: translateZ(calc($perspective - $halfWidth)) rotate3d(1, -0.5, 1, -540deg) !important;
    transition: transform 3s;
  }

  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: rgba(184, 135, 11, 0.678);
  }
  .face-front {
    transform: translateZ($halfWidth);
  }

  [class$='backface'] {
    background-color: rgba(0, 128, 0, 0.589);
  }

  .face-front-backface {
    transform: translateZ($halfWidth) rotateY(180deg);
  }

  .face-back {
    transform: translateZ(-$halfWidth) rotateY(180deg);
  }
  .face-back-backface {
    transform: translateZ(-$halfWidth);
  }
  .face-right {
    transform: rotateY(90deg) translateZ($halfWidth);
  }
  .face-right-backface {
    transform: rotateY(-90deg) translateZ(-$halfWidth);
  }
  .face-left {
    transform: rotateY(-90deg) translateZ($halfWidth);
  }
  .face-left-backface {
    transform: rotateY(90deg) translateZ(-$halfWidth);
  }
  .face-bottom {
    transform: rotateX(-90deg) translateZ($halfWidth);
  }
  .face-bottom-backface {
    transform: rotateX(90deg) translateZ(-$halfWidth);
  }
  .face-top {
    transform: rotateX(90deg) translateZ($halfWidth);
  }
  .face-top-backface {
    transform: rotateX(-90deg) translateZ(-$halfWidth);
  }
}

.btn {
  position: relative;
  z-index: 100;
}
</style>
